<template>
  <div class="store-list">
    <!-- 标题 -->
    <div id="store-title"><van-cell :title="label" icon="shop-o"></van-cell></div>
    <!-- 商铺列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul class="item">
          <li v-for="(item, index) in list" :key="item.id" :style="{paddingBottom: index === list.length - 1 ? '10px':''}" @click="goDetails(item.id)">
                <div class="left-img">
                    <van-image
                    width="80px"
                    height="80px"
                    fit="cover"
                    :src="pre + '/img/' + item.image_path"
                    />
                </div>
                <div class="right-desc">
                    <div class="desc-l">
                        <div class="store-title">
                            <span>品牌</span>
                            <span>{{item.name}}</span>
                        </div>
                        <div class="store-rate">
                            <van-rate :allow-half="true" v-model="item.rating" readonly size="12px" /> <span>{{item.rating}}</span> <span class="recent-order-num">月售{{item.recent_order_num}}</span>
                        </div>
                        <div class="store-delivery">
                            <span>&yen;{{item.float_minimum_order_amount}} 起送 / {{item.piecewise_agent_fee.tips}}</span>
                        </div>
                    </div>
                    <div class="desc-r">
                        <div><span :style="{display:'inline-block', padding:'0 3px', border: '1px solid #eee', color: '#aaa'}">保准票</span></div>
                        <div><span :style="{backgroundColor: '#'+ item.delivery_mode.color, color: '#fff', display: 'inline-block', padding: '0 3px'}">{{item.delivery_mode.text}}</span> <span :style="{border: '1px solid #'+ item.delivery_mode.color, color: '#' + item.delivery_mode.color, display: 'inline-block', padding: '0 3px', borderRadius: '5px'}">准时达</span></div>
                        <div><span>{{item.distance}}</span> / <span :style="{color: '#'+ item.delivery_mode.color}">{{item.order_lead_time}}</span></div>
                    </div>
                </div>
          </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
// 商铺列表请求
import { StoreList } from "@/request/api";

export default {
  // 加载数据
  data() {
    return {
        pre: "http://kumanxuan1.f3322.net:8001",
        label: "附近商家",
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        limit: 5, // 每次取5条数据
        offset: 0, // 默认从0开始
        lastId: 0   // 数据中最后的索引ID号
    };
  },

  methods: {

    // 点击进入详情页
    goDetails(storeId){
        this.$router.push("/store_detail/" + storeId);
    },

    // 加载列表
    onLoad() {

        setTimeout(() => {
            StoreList({
                latitude: 23.128225,  // 纬度
                longitude: 113.289752,    // 经度
                limit: 5,
                offset: this.offset
            }).then((res) => {
                let data = res.data;
                let lastEl = data[data.length - 1];
                if(lastEl != undefined && (lastEl.id > this.lastId)){
                    this.lastId = lastEl.id;
                    this.list = this.list.concat(data);
                    this.loading = false;
                } else {
                    this.finished = true;
                }
 
            });
            this.offset = this.offset + 5;
        }, 1000);
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>

<style lang="less" scoped>
    .store-list{
        
        margin-top: 22px;
        margin-bottom: 100px;

        // 商家标题
        #store-title{
            background-color: #fff;
            padding: 12px 0 11px 0;
            border-bottom: 1px solid #eee;
            .van-cell__left-icon{
                font-size: 32px;
                color: #999;
            }
            .van-cell__title span{
                font-size: 28px;
                color: #999;
            }
        }


        /* 列表内容 */
        .item{
            background-color: #fff;
            li{
                padding: 20px 20px 0 20px;
                display: flex;
                .right-desc{
                    padding-left: 20px;
                    box-sizing: border-box ;
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    .desc-l{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        // 商家标题
                        .store-title{
                            font-size: 30px;
                            font-weight: bold;
                            span:nth-child(1){
                                background-color: #ffd21e;
                                display: inline-block;
                                padding: 0px 5px;
                                margin-right: 10px;
                                border-radius: 2px;
                            }
                        }
                        .store-rate{
                            color: #fb920d;
                            font-size: 22px;
                            .recent-order-num{
                                color: #888
                            }
                        }
                        .store-delivery{
                            color: #888
                        }
                    }
                    .desc-r{
                        text-align: right;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        div:nth-child(3){
                            color: #aaa
                        }
                    }
                }
            }
        }
    }


</style>